<template>
  <div class="user-info">
    <div class="user-info-detail">
      <div class="user-info-detail-top">
        <el-image
                  style="width: 60px;height: 60px;border-radius: 5px"
                  :src="user.avatarThumb"
                  :preview-src-list="[user.avatar]">
        </el-image>
<!--        <img :src="user.avatar" class="user-info-detail-top-avatar">-->
        <div class="user-info-detail-top-mid">
          <span class="user-info-detail-top-mid-name">{{user.comment}} </span>
          <span :class="user.gender === 0?'user-info-detail-top-mid-gender iconfont icon-male':'user-info-detail-top-mid-gender iconfont icon-female'"></span><br>
          昵称: {{user.nickname}}<br>
          账号: {{user.username}}<br>
          地区: {{user.district}}
        </div>
        <div class="user-info-detail-top-right el-icon-more" title="更多"></div>
      </div>
      <div class="user-info-detail-bottom">
        <div class="user-info-detail-bottom-name">备注名<span>{{user.comment}}</span></div>
        <div class="user-info-detail-bottom-tag">标签<span>好友</span></div>
        <div class="user-info-detail-bottom-source">来源<span>通过扫一扫添加</span></div>
        <div style="display: flex; justify-content: space-around">
          <button class="user-info-detail-bottom-button" @click="sendMessage(user.id)">发消息</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  mounted () {
    console.log('userinfo id = ' + this.$props.id)
    this.loadUserInfo(this.$props.id)
  },
  data () {
    return {
      user: {
        id: 0,
        avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.uyutHbMG8kAiBUrid0W9owHaHa?pid=ImgDet&rs=1',
        gender: 0,
        nickname: '张三',
        username: 'lfajdslfle',
        comment: '阿三'
      }
    }
  },
  methods: {
    sendMessage (id) {
      this.$store.commit('setSelectedItem', 0)
      this.$router.push({name: 'Chat', params: {id}})
    },
    loadUserInfo (id) {
      this.axios.get(`/api/v1/user/detail?id=${id}`).then((response) => {
        if (response.data.code === 1) {
          this.user = response.data.data
        } else {
          this.$message.error(response.data.message)
          console.error(response.data.message)
        }
      }).catch((error) => {
        this.$message.error(error)
        console.error(error)
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.user-info
  &-detail
    &-top
      display flex
      font-size 13px
      color #9e9e9e
      padding-bottom 20px
      border-bottom 1px solid #eaeaea
      &-avatar
        width 60px
        height 60px
        border-radius 5px
      &-mid
        flex-grow 1
        margin-left 10px
        &-name
          font-size 15px
          color black
        &-gender
          font-size 15px
          color #10aeff
        .icon-female
          color #f37e7d
      &-right
        height 20px
        font-size 20px
        color #7a7a7a
        padding 0 2px
        border-radius 3px
        &:hover
          background-color #dddddd
          cursor pointer
    &-bottom
      margin-top 20px
      &>div
        font-size 13px
        color #9e9e9e
        margin-bottom 10px
      &-name
        &>span
          margin-left 35px
          font-size 14px
          color black
      &-tag
        &>span
          margin-left 47px
          font-size 14px
          color black
      &-source
        padding-bottom 20px
        border-bottom 1px solid #eaeaea
        &>span
          margin-left 47px
          font-size 14px
          color black
      &-button
        display inline-block
        margin-top 20px
        height 30px
        width 115px
        color white
        background-color #07c160
        border none
        border-radius 4px
        &:hover
          background-color #38cd7f
          cursor pointer
</style>
